<oem-header
  id="header-nav"
  class="control-all-header-fixed block"
  style="--nav-bg: {{data.nav_bg}};--menu-color: {{data.menu_color}};"
>
  <div class="header-top">
    <div class="container_wrapper">
      <div class="content flex justify-between md:gap-10 public_radius">
        <!-- mobile menu btn -->
        <div class="mobile_menu_btn_wrap flex items-center gap-3 md:hidden">
          <div class="mobile_menu_btn md:hidden flex items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="feather feather-menu"
              aria-hidden="true"
            >
              <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
          </div>
          {% if data.is_search %}
            <div class="search_icon control-all-search md:hidden cursor-pointer flex">
              <svg width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">
                <g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke="currentColor"><circle cx="10.364" cy="10.364" r="10.364"></circle><path stroke-linecap="square" d="m18 18 5.777 5.788"></path></g></g>
              </svg>
            </div>
          {% endif %}
        </div>

        <!-- logo -->
        <div class="nav-logo flex my-3">
          {% include 'logo', settings: data, class: 'logo flex justify-center items-center' %}
        </div>

        <!-- inline navigation -->
        <div id="inline_nav_wrap" class="md:flex hidden items-center justify-center flex-1 overflow-hidden z-[999]">
          <div class="h-full w-full flex justify-center">
            {% include 'header_menu', data: data %}
          </div>
        </div>

        <!-- header_icons -->
        {% include 'header_icons', data: data %}
      </div>
    </div>
  </div>

  {% include 'search_popup',data: data %}
</oem-header>
<div class="header-nav-placeholder hidden"></div>


<script>
$(function() {
    $('.search_icon').on('click', function() {
      $('#search-popup').addClass('show')
    })

    $('#search-popup .close_search').on('click', function() {
      $('#search-popup').removeClass('show')
    })

    $(window).on('scroll', function() {
      $('.header-nav-placeholder').height($('#header-nav .header-top').height() + 30)
      let headerNavTop = document.querySelector('#header-nav').offsetTop
      setHeaderPlaceholder($(window).scrollTop(), headerNavTop)
      if($(window).scrollTop() > headerNavTop) {
        $('#header-nav').addClass('is_fixed')
      }else {
        $('#header-nav').removeClass('is_fixed')
      }

    })

    function setHeaderPlaceholder(scrollTop, elemTop) {
      if(scrollTop > elemTop) {
        $('.header-nav-placeholder').removeClass('hidden')
      }else {
        $('.header-nav-placeholder').addClass('hidden')
      }
    }

    $('#header-nav .mobile_menu_btn').on('click',function() {
      switchClass($('#mobile_nav'),'show')
    })

    $('#mobile_nav .mobile_nav_close span').on('click',function() {
      $('#mobile_nav').removeClass('show')
    })
})
</script>

<script>
  (function () {
    $('#cart_icon').click(function () {
      window.oemsaasMiniCart();
    });

    $('.minicart .close_btn').click(function () {
      $('.minicart').removeClass('minicart_on');
    });
    $('.minicart').click(function () {
      $('.minicart').removeClass('minicart_on');
    });
    $('.minicart_wrapper').click(function (e) {
      e.stopPropagation();
    });
    addCartNum();
  })();
</script>
